<template>
	<view class="content">   
		 <!-- 技师列表 -->
		 <view  class="userList" >
			  <!-- 技师列表 -->
			 <list v-if="total>0" :projectList='project' @godetails='godetails' @collect='collect' @reserve='reserve'></list> 
			 <uv-load-more :status="isLoading" fontSize='12' color='#696969' nomoreText=' '/>
		 </view>
		 <!-- 缺省状态 --> 
		 <view v-if="total==0" class="emptys">
			 <image src="@/static/picture/empty.png" mode="widthFix" lazy-load></image>
			 <view>您还没有相关收藏</view>
		 </view>
		 <!-- 预约弹窗 --> 
		 <uv-popup mode='bottom'  zIndex='991' round="12" duration='300' closeable ref="popup" >
				<subscribeList ref="cou" :state="stateindex" :projectList="projectLists" :projectInfo="projectInfo"   @addProject='placeOrder'  @goInfor='goInfor'></subscribeList>
		 </uv-popup>  
	</view>
</template>

<script>
	import { projectList,collectionList,massagistDetails ,dictType,geturl,isToken,collection} from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js'
	import subscribe from '@/components/subscribe.vue'
	import subscribeList from '@/components/subscribe-list.vue' 
	import list from '@/components/technician-list.vue'
	import { string } from '../../uni_modules/uv-ui-tools/libs/function/test'
	import config from '@/config.js' 
	export default {
		mixins: [badgeMix],
		components:{subscribe,list,subscribeList},
		data() {
			return {  
				stateindex:'0',   
				projectLists:[],
				projectInfo:{}, 
				project:[],
				isLoading:'nomore',  //是否加载中
				pageNum:1,//请求的页码
				pageSize:10,//请求的条数 
				total:1,
				serviceId:'', //项目id
				pageshow:{},
				bgurl:config.imageUrl,
				
			}
		},
		onShow() { 
			
		},
		onLoad(option) { 
			
		},
		mounted() {
		    this.getjsList(); // 调用加载数据的方法
		  },
		methods: {    
			// 收藏技师列表
			getjsList(){
				this.isLoading = 'loading' 
				const  datas = {
					"current": this.pageNum,  //页码
					"size": this.pageSize,   //条数  
					"id":"", //技师id
					"lon":uni.getStorageSync('longitude'),  //经度
					"lat":uni.getStorageSync('latitude'),  //纬度 
				} 
				collectionList(datas).then((res) => {
					console.log(res);  
					if(res.code == '200'){
						const data = res.result.records  
						this.project = [...this.project,...data] 
						this.total = res.result.total 
						this.isLoading = data.length < this.pageSize ? 'nomore' : '';  
					}
				})  
			}, 
			// 立即预约弹窗
			async reserve(item,index){ 
				const datas = {
					'massagistId':item.id,
					// #ifdef MP-WEIXIN
					"source" : 'WeChatMini',
					"version" : config.appInfo.version
					// #endif
				}
				massagistDetails(datas).then(async(res) => { 
					if(res.code == '200'){ 
						res.result.serviceList.forEach((item,index)=>{
							res.result.serviceList[index].num = 0
						})
						this.projectLists = res.result.serviceList
						this.projectInfo = res.result 
					}
				}) 
				this.$refs.popup.open('bottom');
			},
			// 项目详情
			goInfor(projectId){  
				this.$refs.popup.close(); 
				uni.navigateTo({
					url:'/pages/index/details?id='+projectId
				})
			},
			// 立即预约
			placeOrder(addOrderId,num,mid){ 
				this.$refs.popup.close();
				uni.navigateTo({
					url:`/pages/order/orderPay?pid=${addOrderId}&mid=${mid}&num=${num}`
				})  
			},
			// 技师详情
			godetails(item,index){
				uni.navigateTo({
					url:'/pages/technician/userDetail?id='+item.id
				})
			},
			// 技师收藏
			collect(item){
				console.log(item);
				this.isCollect(item.id).then((res)=>{
					item.userCollectionFlag = !item.userCollectionFlag
					item.userCollectionFlag?item.followCount=item.followCount+1:item.followCount!=0?item.followCount=item.followCount-1:item.followCount 
					// this.project = []
					// this.pageNum = 1
					// this.getjsList() 
				}) 
				// collection({'massagistId':item.id}).then((res) => { 
				// 	if(res.code == '200'){ 
				// 		if(res.result.collection){
				// 			uni.showToast({
				// 				title:'感谢您的收藏，下次可以在我的收藏里找到我～',  //已取消收藏，下次想找到我，可以搜索我的名字～
				// 				icon:'none'
				// 			})
				// 		}else{
				// 			uni.showToast({
				// 				title:'已取消收藏，下次想找到我，可以搜索我的名字～',  //
				// 				icon:'none'
				// 			})
				// 		}
				// 		this.project = []
				// 		this.pageNum = 1
				// 		this.getjsList() 
				// 	}  
				// })  
			}, 
			confirm(e) {
				console.log('confirm', e.value[0]);
				this.pickers = e.value[0]
			}, 
		},
		// 上拉刷新
　　onReachBottom() {  
			//如果最后一次请求，数据为空的话就停止请求，防止多次触发接口
			if(this.isLoading=='nomore'){
				return;
			}
			this.pageNum++
			//调用请求接口
			this.getjsList()  
		},
	}
</script>

<style lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	::-webkit-scrollbar {
			display: none;
			width: 0 !important;
			height: 0 !important;
			-webkit-appearance: none;
			background: transparent;
		} 
	.head_nav{
		position: fixed;
		top: 0;
		width: 750rpx;	
		// height:calc( var(--status-bar-height) + 50px);  
		background-size: 100% auto !important;
		box-sizing: border-box; 
		overflow: hidden;
		z-index: 999;
		.navs{
			// padding-bottom:20rpx ;
		}
		.navbar{
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			width: 690rpx;
			text-align: center;
			font-size: 40rpx;
			color: #fff;   
			.left{
				position: absolute;
				left: 40rpx;
			}
		} 
	}
	.tabsnav{
		// position: fixed;
		// margin-top: -5rpx;
		width: 750rpx;	 
		height: 90rpx;
		background-color: #fff;
		border-radius: 12rpx 12rpx 0rpx 0rpx;
	} 
	.userList{
		position: relative;
		width: 690rpx;
		padding: 16rpx 30rpx; 
		margin-top: 18rpx; 
	}
</style>
